<template>
<div class="flex flex-col items-center justify-center font-bold text-lg mb-6">数据统计</div>
<i class="flex items-center justify-center text-lg">用户数据统计图表</i>
<div class="w-full h-80" ref="chart" ></div>
<i class="flex items-center justify-center text-lg">商品数据统计图表</i>
<div class="w-full h-80"ref="chart1"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted } from 'vue';

const chart = ref<HTMLElement | null>(null);
const chart1 = ref<HTMLElement | null>(null);
let chart_instance: echarts.ECharts | null = null;
let chart_instance1: echarts.ECharts | null = null;

onMounted(() => {
  if (chart.value) {
    chart_instance = echarts.init(chart.value);
    const option = {
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value'
      },
      series: [ 
        {
          data: [150, 230, 224, 218, 135, 147, 260, 180, 180, 200, 250, 300],
          type: 'line'
        }
      ]
    };

    chart_instance.setOption(option);
  }
  if (chart1.value) {
    chart_instance1 = echarts.init(chart1.value);
    const option1 = {
  dataset: [
    {
      dimensions: ['商品名', '单价', '销量', '日期'],
      source: [
        ['苹果', 3.5, 1000, '2022-01-01'],
        ['香蕉', 2.5, 800, '2022-01-02'],
        ['橘子', 3.0, 1200, '2022-01-03'],
        ['草莓', 2.8, 900, '2022-01-04'],
        ['梨', 2.6, 700, '2022-01-05'],
        ['葡萄', 3.2, 1500, '2022-01-06'],
        ['西瓜', 2.8, 1000, '2022-01-07'],
        ['柠檬', 3.0, 1300, '2022-01-08'],
        ['菠萝', 2.5, 800, '2022-01-09'],
        ['桃子', 3.5, 1200, '2022-01-10']
      ]
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: '销量', order: 'desc' }
      }
    }
  ],
  xAxis: {
    type: 'category',
    axisLabel: { interval: 0, rotate: 30 }
  },
  yAxis: {},
  series: {
    type: 'bar',
    encode: { x: '商品名', y: '销量' },
    datasetIndex: 1
  }
};


    chart_instance1.setOption(option1);
  }
});

onUnmounted(() => {
  chart_instance?.dispose();
  chart_instance1?.dispose();
});
</script>
